<template>
  <div>
    <el-card class="goods-list" shadow="hover">
      <el-date-picker
          v-model="dateRange"
          type="daterange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="handleDateChange"
      ></el-date-picker>

      <el-table :data="filteredTransactionData" style="width: 100%" border :default-sort="{prop: 'createTime', order: 'descending'}">
        <el-table-column prop="createTime" label="交易时间"></el-table-column>
        <el-table-column prop="sourceUserId" label="发起者ID"></el-table-column>
        <el-table-column prop="receiverUserId" label="接收者ID" :formatter="formatReceiver"></el-table-column>
        <el-table-column prop="coinNum" label="交易额度(时间币)"></el-table-column>
        <el-table-column label="详情" width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="handleDetail(scope.row)" size="mini">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 详情弹窗 -->
      <el-dialog title="交易详情" :visible.sync="detailDialogVisible" width="30%">
        <p v-if="selectedTransaction">
          <span style="font-size: 16px">项目名称：{{ currentData.name }}</span><br><br>
          <span style="font-size: 16px">交易金额：{{ currentData.money }} &nbsp时间币</span><br><br>
          <span style="font-size: 16px">交易时间：{{ currentData.time }}</span><br><br>
          <!-- 这里可以根据需要展示更多交易详情 -->
        </p>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {queryAllCoin,
  queryDetailActive} from '../../../api/index'

export default {
  data() {
    return {
      transactionData: [], // 时间币交易流水数据
      filteredTransactionData: [], // 过滤后的时间币交易流水数据
      detailDialogVisible: false, // 详情弹窗是否可见
      currentData:{},
      selectedTransaction: null, // 当前选中的交易
      dateRange: [], // 日期范围选择
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      }
    };
  },
  methods: {
    // 点击查看详情按钮
    handleDetail(transaction) {
      this.selectedTransaction = transaction;
      console.log("查看这一列的对象")
      console.log(transaction)
      switch (transaction.type){
        case '0':
          console.log("普通志愿")
          this.currentData = {
            name:'陪伴长者，温暖关怀',
            money:transaction.coinNum,
            time:transaction.createTime,
            address:'广东省深圳市龙岗社区'
          }
          break
        case '1':
          console.log("商品交易")
          this.currentData = {
            name:'老年人专用防滑鞋夏季新款1件',
            money:transaction.coinNum,
            time:transaction.createTime,
            address:'广东省深圳市龙岗区龙翔大道2188号'
          }
          break
        case '3':
          console.log("学习活动")
          this.currentData = {
            name:'舞狮子非遗传承文化',
            money:transaction.coinNum,
            time:transaction.createTime,
            address:'广东深圳'
          }
          break
        default:
          return
      }
      this.detailDialogVisible = true;
    },
    // 处理日期范围变化
    handleDateChange() {
      const [startDate, endDate] = this.dateRange;
      this.filteredTransactionData = this.transactionData.filter(transaction => {
        const transactionDate = new Date(transaction.createTime);
        return startDate <= transactionDate && transactionDate <= endDate;
      });
    },
    getCoinData() {
      queryAllCoin().then(res => {
        this.transactionData = res.data;
        this.filteredTransactionData = res.data; // 初始化时展示全部数据
        console.log(res.data)
      });
    },
    formatReceiver(row, column, cellValue){
      if(cellValue){
        return cellValue
      }else{
        return "暂存后台"
      }
    }
  },
  mounted() {
    this.getCoinData();
  }
};
</script>
